<template>
	<tm-app ref="app">
		<tm-navbar title="帮手检索" color="orange" linear="right" beforeBack="true" hideHome="true"
			@click="backPage"></tm-navbar>
		<tm-sheet>
			<tm-text :font-size="25" _class="font-weight-b" label="选择院校"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<view v-for="(item,index) in slist" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manSchoolStatus(item.status,item.id)" checkable
						color="orange" size="m" :label="item.name"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manSchoolStatus(item.status,item.id)" color="orange"
						size="m" :label="item.name"></tm-tag>
				</view>
			</view>
		</tm-sheet>


		<tm-sheet>
			<tm-text :font-size="25" _class="font-weight-b" label="选择阶段"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<view v-for="(item,index) in subjectlist" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manNjStatus(item.status,item.id)" checkable color="orange"
						size="m" :label="item.name"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manNjStatus(item.status,item.id)" color="orange" size="m"
						 :label="item.name"></tm-tag>
				</view>
			</view>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="25" _class="font-weight-b" label="选择日期时间"></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap">
				<view v-for="(item,index) in dateList" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manDateStatus(item.status,item.id,item.date)" checkable color="orange"
						size="m" :label="item.date"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manDateStatus(item.status,item.id,item.date)" color="orange" size="m"
						:label="item.date"></tm-tag>
				</view>
			</view>
		</tm-sheet>

<view class="pd40">
		<view class="goods-container flex-start">
			<view class="goods-box" :key="index" v-for="(item,index) in imglist">
				<tm-image  :height="250" :src="item.img" @click="bsClick(item['id'])"></tm-image>
				<view class="pt-12 pb-12 px-12">
					<tm-text :label="item.name" _class="goods-title"></tm-text>
				</view>
			</view>
		</view>
		</view>
		



		<view class="mb-32 mx-32 round-3 overflow">
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
			<tm-cell :margin="[0, 0]" :titleFontSize="30" title=" ">
				<template v-slot:right><tm-text label=" "></tm-text></template>
			</tm-cell>
		</view>

		
		<tm-drawer ref="calendarView" cancelText="" :placement="pos" v-model:show="showWin">
			<tm-text :font-size="25" _class="font-weight-b" label="选择时间" ></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap" >
				<view v-for="(item,index) in timelist" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manTimeStatus(item.status,item.id,item.val)" checkable color="orange"
						size="m" :label="item.val"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manTimeStatus(item.status,item.id,item.val)" color="orange"
						size="m" :label="item.val"></tm-tag>
				</view>
			</view>
		</tm-drawer>
		
		
		<tm-drawer ref="calendarView" cancelText="" :placement="pos" v-model:show="showWinSubject">
			<tm-sheet>
			<tm-text :font-size="25" _class="font-weight-b" label="选择科目" ></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap" >
				<view v-for="(item,index) in subjecSectlist" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manSubjectStatus(item.status,item.id,item.nCount)" checkable color="orange"
						size="m" :label="item.nams"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manSubjectStatus(item.status,item.id,item.nCount)" color="orange" size="m"
						:label="item.nams"></tm-tag>
				</view>
			</view>
			</tm-sheet>
			<tm-sheet>
			<tm-text :font-size="25" _class="font-weight-b" label="细分科目" ></tm-text>
			<tm-divider></tm-divider>
			<view class="flex-row flex flex-wrap" >
				<view v-for="(item,index) in lowerlist" :key="index">
					<tm-tag v-if="item.status == '0'" @click="manLowerStatus(item.status,item.id)" checkable color="orange"
						size="m" :label="item.name"></tm-tag>
					<tm-tag v-if="item.status == '1'" @click="manLowerStatus(item.status,item.id)" color="orange"
						size="m" :label="item.name"></tm-tag>
				</view>
			</view>
			</tm-sheet>
		</tm-drawer>
		


		<tm-tabbar :autoSelect="false" v-model:active="acc">
			<tm-tabbar-item @click="acc=0" activeColor="orange" url='/pages/index/index' open-type='reLaunch' text="首页"
				icon='tmicon-md-home'></tm-tabbar-item>
			<tm-tabbar-item @click="acc=1" activeColor="orange" url='/pages/index/seach' text="预约"
				icon='tmicon-ios-bookmarks'></tm-tabbar-item>
			<!--
			<tm-tabbar-item @click="acc=2" :shadow="2" text="分享" url='/pages/index/share' btn-top fontColor="white"
				activeColor="white" linear="top" linearDeep="accent" color="yellow" icon="tmicon-plus"></tm-tabbar-item>-->
			<tm-tabbar-item @click="acc=2" activeColor="orange" url='/pages/index/order' text="订单"
				unicon="tmicon-ios-filing" icon="tmicon-ios-filing"></tm-tabbar-item>
			<tm-tabbar-item @click="acc=3" activeColor="orange" url='/pages/index/my' text="我" unicon="tmicon-account"
				icon="tmicon-userplus-fill"></tm-tabbar-item>
		</tm-tabbar>

	</tm-app>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import tmWaterfall from "@/tmui/components/tm-waterfall/tm-waterfall.vue"
	import tmWaterfallItem from "@/tmui/components/tm-waterfall-item/tm-waterfall-item.vue"
	import { schoolNameList, getTopSubject, getSubjectForParam, getPage, manSelBsSchool, manOnlyBsSel, getNowDateList, getNextSubjectList } from '@/api/search'
	import tmCalendarView from "@/tmui/components/tm-calendar-view/tm-calendar-view.vue"
	
	
	const calendarView = ref<InstanceType<typeof tmCalendarView> | null>(null)
	const wall = ref<InstanceType<typeof tmWaterfall> | null>(null)
	const acc = ref(1)
	const slist = ref([]);
	const subjecSectlist = ref([]);
	const imglist = ref([])
	const page = ref("1")
	const schlist = ref("")
	const subjectid = ref("");
	const dateList = ref([]);
	const timelist = ref([]);
	const showWin = ref(false);
	const showWinSubject = ref(false);
	const lowerlist = ref([]);
	const pos = ref("left");
	const dateStr = ref("");
	const timeStr = ref("");
	
	const manTimeStatus = async(status : string, id : string,date : string) => {
		let param = { "status": status, "id": id, "list": timelist.value };
		const result = await manOnlyBsSel(param);
		timeStr.value = date;
		timelist.value = result.list;
		showWin.value=false;
		imglist.value = [];
		getPageList();
	}
	
	const manDateStatus = async(status : string, id : string,date : string) => {
		let param = { "status": status, "id": id, "list": dateList.value };
		const result = await manOnlyBsSel(param);
		dateStr.value = date;
		dateList.value = result.list;
		showWin.value=true;
	}
	
	const manLowerStatus = async(status : string, id : string) => {
		subjectid.value = id;
		lowerlist.value = [];
		getPageList();
		showWinSubject.value = false;
	}
	
	
	const manSubjectStatus = async (status : string, id : string,nCount : string) => {
		let param = { "status": status, "id": id, "list": subjecSectlist.value };
		const result = await manOnlyBsSel(param);
		subjecSectlist.value = result.list;
		subjectid.value = id;
		imglist.value = [];
		if(nCount === 0){
			getPageList();
			showWinSubject.value = false;
		}else{
			loadNextSubject(id);
		}
	}
	
	const loadNextSubject = async(id : string) => {
		let param = {"id":id};
		const result = await getNextSubjectList(param);
		// console.log(JSON.stringify(result));
		lowerlist.value = result;
	}
	
	

	const manNjStatus = async (status : string, id : string) => {
		let param = { "status": status, "id": id, "list": subjectlist.value };
		const result = await manOnlyBsSel(param);
		// console.log(JSON.stringify(result)); 
		subjectlist.value = result.list;
		showWinSubject.value = true;
		loadSecSubject(result.result);
	}


	function manSchoolStatus(status : string, id : string) {
		mMoretime(status, id);
	}

	const mMoretime = async (status : string, id : string) => {
		let param = { "status": status, "id": id, "list": slist.value };
		const result = await manSelBsSchool(param);
		// console.log(JSON.stringify(result));
		slist.value = result.list;
		schlist.value = result.timeResult;
		imglist.value = [];
		getPageList();
	}

	const schoolList = async () => {
		const result = await schoolNameList();
		// console.log(JSON.stringify(result));
		slist.value = result;
	}

	const subjectlist = ref([]);
	const topSubject = async () => {
		const result = await getTopSubject();
		subjectlist.value = result;
	}

	const getSubjectp = async (subject : String) => {
		let param = { "subject": subject }
		const result = await getSubjectForParam(param);
		subjecSectlist.value = result;
	}


	function bsClick(id : string) {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		})
	}




	function loadSecSubject(id : string) {
		subjecSectlist.value = [];
		getSubjectp(id);
	}

	function changData(id : String) {
		console.log(id);
	}

	const getPageList = async () => {
		let param = { "page": page.value, "schlist": schlist.value, "subjectid":subjectid.value, "date":dateStr.value,"time": timeStr.value};
		const result = await getPage(param);
		result.forEach(function (arr, index) {
			imglist.value.push(arr);
		})
	}



	function getSchoolList() {
		schoolList();
		topSubject();
		queryDateData();
		getPageList();
	}

	function backPage(e : any) {
		// console.log(JSON.stringify(e));
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	
	const queryDateData = async() => {
		const result = await getNowDateList();
		dateList.value = result.dateList;
		timelist.value = result.timelist;
	}



	getSchoolList();
</script>

<style>

	.title-c {
		display: block;
		font-size: 32rpx;
		font-weight: 900;
		color: #333;
	}

	.goods-box {
		width: 30.3%;
		margin: 0% 1.5% 0.5em 1.5%;
		flex: none;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 0.3em;
		box-shadow: 2px 3px 15px #eee;
	}
	
	.goods-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* background-color:#fff; */
		padding: 0 20rpx 20rpx 20rpx;
	}
	
	.goods-title {
		/* width: 343rpx; */
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: .9em;
		color: #333;
		padding: 0;
		line-height: 1.5;
		text-align: center;
	}
	.pd40 {
		background-color: #fff;
		width: 92%;
		padding: 0.8em .3% 0;
		margin: 1em auto 1em;
		border-radius: 0.2em;
		/*padding: 20rpx 20rpx 10rpx;*/
	}
	.pd40 .multigroup-more { 
	  color: #777;
	  border-radius:44rpx;
	  font-size: 24rpx;
	  display:block;
	  padding:4rpx 15rpx;
	  border: 0px solid #777;
	  }
</style>